<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
	</head>

	<body>

		<div class="mui-content" class="">
			<div class="mui-card" style="margin-top: 6px;">
				<div class="mui-row">
					<div class="mui-col-xs-3 mui-text-center">
						<img id="wxImageUrl" src="img/mine_avatar.png" style="width: 60px;height: 60px;border-radius: 30px;" />
					</div>
					<div id="WXNAME" class="mui-col-xs-9 hmx-text-darkgray" style="line-height: 65px;margin: 0;">
						张某某
					</div>
				</div>
			</div>
			<div class="mui-card" style="font-size: 120%;">
				<div class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:0 0 8px 0;">
					<div class="mui-col-xs-1">
						<span class="hmx-text-orange icon-user"></span>
					</div>
					<div class="mui-col-xs-9">
						<span class="hmx-test-xs hmx-text-darkgray">用户名：</span>
						<span id="USERNAME" class="hmx-test-xs hmx-text-darkgray"></span>
					</div>
					<div class="mui-col-xs-2 mui-text-right">
						<span class="hmx-test-xs icon-angle-right"></span>
					</div>
				</div>
				<div onclick="go2PersonalEditor()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:8px 0;">
					<div class="mui-col-xs-1">
						<span class="hmx-text-orange icon-mobile-phone icon-large"></span>
					</div>
					<div class="mui-col-xs-9">
						<span class="hmx-test-xs hmx-text-darkgray">手机号：</span>
						<span id="TELPHONE" class="hmx-test-xs hmx-text-darkgray"></span>
					</div>
					<div class="mui-col-xs-2 mui-text-right">
						<span class="hmx-test-xs icon-angle-right"></span>
					</div>
				</div>
				<div onclick="go2PersonalEditor()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:8px 0;">
					<div class="mui-col-xs-1">
						<span class="hmx-text-orange icon-envelope"></span>
					</div>
					<div class="mui-col-xs-9">
						<span class="hmx-test-xs hmx-text-darkgray">邮箱：</span>
						<span id="USEREMAIL" class="hmx-test-xs hmx-text-darkgray"></span>
					</div>
					<div class="mui-col-xs-2 mui-text-right">
						<span class="hmx-test-xs icon-angle-right"></span>
					</div>
				</div>
				<div onclick="go2PersonalEditor()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:8px 0;">
					<div class="mui-col-xs-1">
						<span class="hmx-text-orange icon-building"></span>
					</div>
					<div class="mui-col-xs-9">
						<span class="hmx-test-xs hmx-text-darkgray">所在学校：</span>
						<span id="SCHOOL" class="hmx-test-xs hmx-text-darkgray"></span>
					</div>
					<div class="mui-col-xs-2 mui-text-right">
						<span class="hmx-test-xs icon-angle-right"></span>
					</div>
				</div>
				<div onclick="go2PersonalEditor()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:8px 0;">
					<div class="mui-col-xs-1">
						<span class="hmx-text-orange icon-user"></span>
					</div>
					<div class="mui-col-xs-9">
						<span class="hmx-test-xs hmx-text-darkgray">性别：</span>
						<span id="SEX" class="hmx-test-xs hmx-text-darkgray"></span>
					</div>
					<div class="mui-col-xs-2 mui-text-right">
						<span class="hmx-test-xs icon-angle-right"></span>
					</div>
				</div>
				<div onclick="go2PersonalEditor()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:8px 0;">
					<div class="mui-col-xs-1">
						<span class="hmx-text-orange icon-user"></span>
					</div>
					<div class="mui-col-xs-9">
						<span class="hmx-test-xs hmx-text-darkgray">城市：</span>
						<span id="CITY" class="hmx-test-xs hmx-text-darkgray"></span>
					</div>
					<div class="mui-col-xs-2 mui-text-right">
						<span class="hmx-test-xs icon-angle-right"></span>
					</div>
				</div>
				<div onclick="go2PersonalEditor()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:8px 0;">
					<div class="mui-col-xs-1">
						<span class="hmx-text-orange icon-user"></span>
					</div>
					<div class="mui-col-xs-9">
						<span class="hmx-test-xs hmx-text-darkgray">年龄：</span>
						<span id="USERAGE" class="hmx-test-xs hmx-text-darkgray"></span>
					</div>
					<div class="mui-col-xs-2 mui-text-right">
						<span class="hmx-test-xs icon-angle-right"></span>
					</div>
				</div>
				<div class="mui-row" style="line-height: 21px;padding:8px 0 0 0;">
					<div class="mui-col-xs-6">
						<span class="hmx-text-orange icon-off"></span>
						<span class="hmx-test-xs hmx-text-darkgray">退出</span>
					</div>
					<div class="mui-col-xs-6 mui-text-right">
						<span class="hmx-test-xs icon-angle-right"></span>
					</div>
				</div>
			</div>
		</div>

		<script src='js/jquery-2.1.4.min.js'></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();

			function go2PersonalEditor() {
				window.location.href = 'personalEditor.html';
			};

			$(function() {
				initUI();
			});

			function initUI() {
				alert('init');
				$.ajax({
					type: "get",
					url: $.getContextPath() + "/weixin/getClientUser",
					async: true,
					cache:false,
					success: function(r) {
						r = eval('(' + r + ')');
						alert(JSON.stringify(r));
						$('#wxImageUrl').attr('src', r.data['WXIMAGEURL']);
						$('#WXNAME').html(r.data['WXNAME']);
						$('#USERNAME').html(r.data['USERNAME']);
						$('#TELPHONE').html(r.data['TELPHONE']);
						$('#USEREMAIL').html(r.data['USEREMAIL']);
						$('#SCHOOL').html(r.data['SCHOOL']);

						$('#SEX').html(r.data['SEX']);
						$('#CITY').html(r.data['CITY']);
						$('#USERAGE').html(r.data['USERAGE']);
					}
				});
			};
		</script>
	</body>

</html>